<template>
		<!-- 弹出申请方式-->
		<uni-popup ref="showBottom" type="bottom" :safe-area="false" :mask-click="false">
			<view class="popup_way_">
				<view class="text_top_popup">
					地址信息<uni-icons class="icon" color="#aaa" @click="closePopup()" size="22"
						type="closeempty"></uni-icons>
				</view>
				<uni-forms ref="baseForm" label-position="top" :modelValue="baseFormData" label-width="80">
					<view class="uni_form">
						<view class="left_right_form">
							<uni-forms-item required label="联系姓名" name="name"
								:rules="[{ required: true, errorMessage: '请输入联系姓名' },]">
								<uni-easyinput v-model="baseFormData.name" placeholderStyle="font-size:28rpx;"
									placeholder="请输入联系姓名" />
							</uni-forms-item>
							<uni-forms-item required label="联系手机" name="phone" :rules="baseFormRules.phone.rules">
								<uni-easyinput v-model="baseFormData.phone" type="number"
									placeholderStyle="font-size:28rpx;" placeholder="请输入您的手机号" maxlength="11" />
							</uni-forms-item>
							<uni-forms-item required label="所在地区" name="area"
								:rules="[{ required: true, errorMessage: '所在地区' },]">
								<AreaAddress ref="addressRef" style="width: 100%;" @change="addressChange()"
									:address_obj="addressValue">
								</AreaAddress>
							</uni-forms-item>
						</view>
						<uni-forms-item required label="详细地址" name="address"
							:rules="[{ required: true, errorMessage: '详细地址' },]">
							<view class="message">
								<textarea maxlength="200" placeholderStyle="font-size:28rpx;" placeholder="请输入详细地址"
									:auto-height="true" :autosize='false' v-model="baseFormData.address" />
								<p style="text-align: right;font-size: 24rpx; color: #999; padding: 4px;">
									{{baseFormData.address.length}}/200
								</p>
							</view>
						</uni-forms-item>
					</view>
				</uni-forms>
				<view class="address_btn">
					<view class="btn_addres">
						<button type="primary" class="btn" @click="onSave">确定</button>
					</view>
				</view>
			</view>
		</uni-popup>
</template>

<script setup lang="ts">
	import {
		ref,
		reactive,
		toRefs,
		watch
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import _ from "lodash"
	import AreaAddress from '@/components/u-network/AreaAddress.vue'
	const props = defineProps({
		//子组件接收父组件传递过来的值
		showpopup: Boolean,
		userFormData: Object
	})
	//使用父组件传递过来的值
	const { showpopup, userFormData } = toRefs(props)
	const emit = defineEmits(['set-popup', 'value-change'])
	const showBottom = ref(null) //申请工单弹窗
	const addressValue = ref()
	const closePopup = () => {
		showBottom.value.close()
		emit('set-popup', false)
	}
	const openPopup = () => {
		showBottom.value.open()
		emit('set-popup', true)
	}
	watch(showpopup, (n) => {
		if (n) {
			baseFormData.value = _.cloneDeep(userFormData.value)
			addressValue.value = {
				"province": baseFormData.value.province, //省
				"city": baseFormData.value.city, //市
				"area": baseFormData.value.area, //区
				"town": baseFormData.value.town, //镇
			}
			openPopup()
		} else {
			closePopup()
		}
	})
	const baseForm = ref()
	const baseFormData : any = ref({
		"address": "",
		"area": "",
		"city": "",
		"phone": "",
		"province": "",
		"town": "",
		"name": "",
		userId: ''
	})

	const addressRef = ref() //地址组件元素
	const addressChange = () => {
		baseFormData.value.province = addressRef.value.address.province
		baseFormData.value.city = addressRef.value.address.city
		baseFormData.value.area = addressRef.value.address.area
	}
	// 校验手机号
	const baseFormRules = ref({
		phone: {
			rules: [
				{
					required: true,
					errorMessage: '请输入联系手机号',
				}, {
					validateFunction: (rule, value, data, callback) => {
						if (!/^1[^1^2]\d{9}$/.test(value)) {
							callback('请输入正确的手机号')
						}
						return true
					}
				}
			]
		}
	})
	// 确定
	const onSave = async () => {
		await baseForm.value.validate().then(res => {
			closePopup()
			emit("value-change", baseFormData.value)
		}).catch(err => {
			uni.showToast({
				title: '请填写完整信息！',
				icon: 'none'
			})
		})
	}
</script>
<script lang='ts'>
	export default {
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		}
	}
</script>
<style lang="scss" scoped>
	.popup_way_ {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		height: 1100rpx;
		padding: 24rpx;
		box-sizing: border-box;

		.text_top_popup {
			text-align: center;
			font-size: 32rpx;
			padding: 20rpx 0;
			font-weight: bold;

			.icon {
				position: absolute;
				right: 40rpx;
				font-weight: 500;
			}
		}

		.tip_title {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999;
			font-size: 28rpx;
			height: 50%;
		}



		:deep(.uni-forms-item__label) {
			font-size: 28rpx;
		}

		:deep(.uni-easyinput__content-input) {
			font-size: 28rpx;
		}

		.uni_form {
			background-color: #fff;
			border-radius: 10rpx;
			padding: 10rpx 24rpx;

			:deep(.btn_input) {
				display: flex;
				align-items: center;
				height: 35px;
				border-bottom: solid 1px #eee;
				width: 100%;

				.uniui-bottom::before {
					color: #999;
					font-size: 14px;
				}

				.icon {
					top: -20%
				}
			}

			:deep(.uni-forms-item) {
				margin-bottom: 26rpx;

				.uni-forms-item__label {
					padding-bottom: 0;
				}

				.uni-forms-item__error {
					left: auto;
					right: 0;
					padding-top: 2rpx;
				}
			}

			:deep(.left_right_form) {
				.uni-forms-item {
					margin-bottom: 26rpx;

					&.is-direction-top {
						flex-direction: row;
					}

					.uni-forms-item__label {
						padding-bottom: 0;
					}

					.uni-forms-item__error {
						left: auto;
						right: 0;
						padding-top: 2rpx;
					}
				}
			}

			:deep(.is-input-border) {
				border: none;
				border-bottom: 1px solid transparent;
				border-radius: 0;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}

			.message {
				border: solid 1px #eee;

				width: 100%;

				:deep(textarea) {
					font-size: 28rpx;
					// width: 600rpx;
					flex: 1;
					min-height: 100rpx;
					padding: 10rpx 14rpx 0;
					max-height: 200rpx;
					overflow: auto;
				}
			}


		}

		.address_btn {
			position: fixed;
			bottom: 0rpx;
			right: 0;
			left: 0;
			z-index: 6;
			background-color: #fff;
			border-top: 1rpx solid #eee;

			.btn_addres {
				padding: 30rpx 0 40rpx;

				:deep(button:after) {
					border: none !important;
				}

				.btn {
					border-radius: 50rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					background-color: #007cff;
					margin: 0 48rpx;
				}
			}

		}
	}
</style>